

const map = L.map('map').setView([0, 0], 2); // 设置初始视角

//这个灰色图层不太明显，酌情看看删不删
const grayLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    opacity: 0.5 
}).addTo(map);

d3.csv('world_map/data.csv', function(error, data) {
    if (error) {
        console.error('Error loading the CSV file:', error);
        return;
    }

    var parsedData = data.map(function(row) {
        return {
            EXT: parseFloat(row.EXT.replace(/'/g, '')),
            AGR: parseFloat(row.AGR.replace(/'/g, '')),
            CSN: parseFloat(row.CSN.replace(/'/g, '')),
            EST: parseFloat(row.EST.replace(/'/g, '')),
            OPN: parseFloat(row.OPN.replace(/'/g, '')),
            lat: parseFloat(row.lat_appx_lots_of_err.replace(/'/g, '')),
            long: parseFloat(row.long_appx_lots_of_err.replace(/'/g, ''))
        };
    }).filter(function(d) {
        return !isNaN(d.lat) && !isNaN(d.long) && !isNaN(d.EXT) && !isNaN(d.AGR) && 
               !isNaN(d.CSN) && !isNaN(d.EST) && !isNaN(d.OPN);
    });

    var heatLayer = L.heatLayer([], { radius: 25 }).addTo(map);

    function updateHeatmap(type) {
        var dd = parsedData.map(function(d) {
            return [d.lat, d.long, d[type]];
        });
        heatLayer.setLatLngs(dd);
    }

    updateHeatmap('EXT');

    document.getElementById('personality-select').addEventListener('change', function() {
        updateHeatmap(this.value);
    });
});
